<template>
  <div class="box-full flex-col p-m" style="background: #f5f7fd">
    <div class="bgfff p-m mb-m" v-if="activityInfo">
      <a-descriptions
        :title="`${activityInfo?.settle?.activityName}${route.query?.updatedTime ? '-' + route.query.updatedTime : ''}`"
        :column="1"
      >
        <a-descriptions-item label="活动时间">
          {{ activityInfo?.settle?.activityStartTime }} - {{ activityInfo?.settle?.activityEndTime }}
        </a-descriptions-item>
        <a-descriptions-item v-if="activityInfo?.settle?.type == 3" label="奖励系数"
          >{{ activityInfo?.settle?.extends?.rewardFactor ?? '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="奖励人数">
          {{ activityInfo.batch?.awardNum }}
        </a-descriptions-item>
        <a-descriptions-item label="奖励总金额">
          <span style="margin-left: -3px">￥{{ activityInfo.batch?.awardAmount }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="奖励发放状态">
          {{
            activityInfo.batch?.status == 0
              ? '上传中'
              : activityInfo.batch?.status == 10
              ? '待审核'
              : activityInfo.batch?.status == 20
              ? '催审核'
              : activityInfo.batch?.status == 30
              ? '审核通过，待发放'
              : activityInfo.batch?.status == 40
              ? '已发放'
              : activityInfo.batch?.status == -100
              ? '审核不通过'
              : '--'
          }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="w-full flex-1 bgfff m-relative">
      <div class="m-absolute r-14 b-14 t-14 l-14 flex overflow-hidden">
        <GiTable
          :simple="true"
          row-key="id"
          id="rewardDetailsChcj"
          v-model:columns="columns"
          :loading="loading"
          :data="tableData"
          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
          :pagination="pagination"
          @sorter-change="onSorterChange"
          @refresh="getTableData"
        >
          <template #custom-extra>
            <a-form :model="listParams" size="small" class="form w-full flex flex-wrap my-10">
              <a-form-item hide-label class="w-fit mr-10">
                <a-input
                  class="w-36n"
                  v-model="listParams.keyword"
                  @press-enter="changeCurrent(1)"
                  placeholder="输入昵称检索"
                />
              </a-form-item>
              <a-form-item hide-label class="w-fit mr-10">
                <a-input
                  class="w-36n"
                  v-model="listParams.inviteCode"
                  @press-enter="changeCurrent(1)"
                  placeholder="输入邀请码检索"
                />
              </a-form-item>
              <a-form-item hide-label class="w-fit">
                <a-button type="primary" size="small" @click="changeCurrent(1)">
                  <template #icon>
                    <icon-search />
                  </template>
                  <template #default>查询</template>
                </a-button>
                <a-button class="ml-m" size="small" @click="onResetSearch">
                  <template #icon>
                    <icon-sync />
                  </template>
                  <template #default>重置</template>
                </a-button>
              </a-form-item>
            </a-form>
          </template>
          <template #info="{ record }">
            <div class="flex flex-a-c">
              <a-image class="round-50" :src="record.userAvatar" :width="40" :height="40"></a-image>
              <div class="ml-8">
                <div>{{ record?.userName || '--' }}</div>
                <div>{{ record.inviteCode }}</div>
                <!-- <MsUser :text="record.inviteCode" :inviteCode="record.inviteCode" /> -->
              </div>
            </div>
          </template>
          <template #settledAt="{ record }">
            <div class="flex-col">
              <div>{{ record?.settledAt || '--' }}</div>
            </div>
          </template>
          <template #status="{ record }">
            <div class="flex-col flex-a-c">
              <GiDot
                :type="
                  record.status == 0
                    ? 'warning'
                    : record.status == 10
                    ? 'success'
                    : record.status == 20
                    ? 'success'
                    : record.status == -20
                    ? 'danger'
                    : record.status == -10
                    ? 'danger'
                    : 'info'
                "
                :text="
                  record.status == 0
                    ? '待审核'
                    : record.status == 10
                    ? '审核通过，待发放'
                    : record.status == 20
                    ? '已发放'
                    : record.status == -20
                    ? '发放处理失败'
                    : record.status == -10
                    ? '审核不通过'
                    : '--'
                "
                :animation="false"
              />
              <span v-if="record.status == 10 || record.status == 20"></span>
            </div>
          </template>
        </GiTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { batchRowsSearch, activityBatchDetail } from '@/apis'
import { deepClone, deleteEmpty } from '@/utils/common'

const emit = defineEmits(['changeTab'])

defineOptions({ name: 'rewardDetailsChcj' })

const route = useRoute()
const columns = ref([
  {
    title: '用户信息',
    slotName: 'info',
    width: 200
  },
  {
    title: '当时超红总数',
    width: 140,
    dataIndex: 'totalNum',
    align: 'center',
    render({ record }) {
      return `${record.totalNum}`
    }
  },
  {
    title: '当时淘宝超红数',
    width: 150,
    dataIndex: 'tbTotalNum',
    align: 'center',
    render({ record }) {
      return `${record.tbTotalNum}`
    }
  },
  {
    title: '当时京东超红数',
    width: 150,
    dataIndex: 'jdTotalNum',
    align: 'center',
    render({ record }) {
      return `${record.jdTotalNum}`
    }
  },
  {
    title: '抽奖次数（第几次）',
    width: 180,
    dataIndex: 'useIndex',
    align: 'center',
    render({ record }) {
      return `${record.useIndex}`
    }
  },
  {
    title: '抽奖金额',
    width: 150,
    dataIndex: 'amount',
    align: 'center',
    render({ record }) {
      return `￥${record.amount}`
    }
  },
  {
    title: '抽奖时间',
    slotName: 'settledAt',
    align: 'center',
    width: 120
  },
  {
    title: '奖励发放状态',
    width: 140,
    align: 'center',
    slotName: 'status'
  }
])

const loading = ref(false)
const tableData = ref([])
const activityInfo = ref()
const listParams = reactive({
  page: 1,
  size: 10,
  batchId: route.query.batchId,
  keyword: undefined,
  inviteCode: undefined,
  order: undefined
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const param = deepClone(listParams)
    const res = await batchRowsSearch(deleteEmpty(param))
    tableData.value = res.data.data
    setTotal(res?.data?.total || 0)
    getPageInfo()
  } finally {
    loading.value = false
  }
}

// 获取头部数据
const getPageInfo = async () => {
  const res = await activityBatchDetail({ id: route.query.batchId })
  activityInfo.value = res.data
  if (activityInfo.value?.settle?.type == 3) columns.value = jsSuperSubsidyColumns
  else if (activityInfo.value?.settle?.type == 4) columns.value = pdddhpwsColumns
}

//升降序发生改变
const onSorterChange = (dataIndex, direction) => {
  const orderBy = direction ? (direction === 'ascend' ? 'asc' : 'desc') : undefined
  const sort = orderBy ? dataIndex : undefined
  if (orderBy && sort) {
    listParams.order = {
      [sort]: orderBy
    }
  } else {
    listParams.order = undefined
  }

  changeCurrent(1)
}

onMounted(async () => {
  getTableData()
})

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.inviteCode = listParams.keyword = undefined
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: fit-content;
  line-height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.textd43030 {
  color: #d43030;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
